<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <span>商品分类管理</span>
            </div>
        </template>
        <div class="input-btns">
            <el-button type="primary" @click="isShowAdd = true">添加分类</el-button>
        </div>
        <!-- 
            element-ui 构建树形表格
                1. el-table 上必须定义 row-key 属性, 取值为表格循环数据中每个对象中唯一值的属性名
                2. 表格用于循环的数据对象必须是一个符合树形结构的数据；并且在 el-table 通过tree-props属性绑定，定义树形数据的属性名
        -->
        <!-- <el-table :data="cates" row-key="cat_id" :tree-props="{ children:'children' }" size="small" :border="true" stripe v-loading="isShowLoading">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
            <el-table-column label="分类名称" prop="cat_name"></el-table-column>
            <el-table-column label="是否有效" prop="cat_deleted"></el-table-column>
            <el-table-column label="排序" prop="cat_level"></el-table-column>
            <el-table-column label="操作" width="180px">
                <el-button type='primary' size='small'>
                    <el-icon>
                        <EditPen></EditPen>
                    </el-icon>
                    编辑
                </el-button>
                <el-popconfirm title='确定删除用户吗?'>
                    <template #reference>
                        <div class="tip">
                            <el-button type='danger' size='small'>
                                <el-icon>
                                    <Delete></Delete>
                                </el-icon>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-popconfirm>
            </el-table-column>
        </el-table> -->

        <!-- vue2 = vue-table-tree-grid -->
        <!-- vue3 = vex-table
                1.  npm install xe-utils vxe-table -S
                2.  main.js 完整加载
                3.  项目使用
        -->
        <vxe-table border="full" :data="cates" :tree-config="{}" :seq-config="seqConfig" :loading="isShowLoading">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <vxe-column type="seq" title="序号" width="60"></vxe-column>
            <vxe-column field="cat_name" title="分类名称" tree-node></vxe-column>
            <vxe-column field="cat_deleted" title="是否有效"></vxe-column>
            <vxe-column field="cat_level" title="排序"></vxe-column>
            <vxe-column title="操作">
                <el-button type='primary' size='small'>
                    <el-icon>
                        <EditPen></EditPen>
                    </el-icon>
                    编辑
                </el-button>
                <el-popconfirm title='确定删除用户吗?'>
                    <template #reference>
                        <div class="tip">
                            <el-button type='danger' size='small'>
                                <el-icon>
                                    <Delete></Delete>
                                </el-icon>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-popconfirm>
            </vxe-column>
        </vxe-table>
        <el-pagination 
            small="small" 
            :background="true" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total"
            v-model:page-size="pageSize"
            v-model:current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            @size-change="resetInitCates()"
            @current-change="initCates()"
        />
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { printLog } from "@/util";
import cateApi from "@/api/categories.js";

let isShowLoading = ref(false)
let cates = ref([])
let total = ref(0)
let pageSize = ref(5)
let pageNum = ref(1)

let seqConfig = ref({
    seqMethod ({ level,seq }) {
        return level==0?seq:""
    }
})

const initCates = async function () {
    try {
        isShowLoading.value = true;
        let result = await cateApi.loadCategories({
            type: 3,
            pagenum: pageNum.value,
            pagesize: pageSize.value
        })
        total.value = Number(result.total)
        cates.value = result.result
    } catch (error) {
        printLog(error)
    } finally {
        isShowLoading.value = false;
    }
}
const resetInitCates = function(){
    pageNum.value = 1;
    initCates()
}
initCates()
</script>

<style lang="scss" scoped>
.input-btns {
    margin-bottom: 20px;

    .el-input {
        display: inline-flex;
        width: 400px;
        margin-right: 20px;
    }
}

.el-card {
    display: flex;
    flex-flow: column;
    :deep(.el-card__body) {
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        overflow: hidden;
    }
}

:deep(.index .el-table__placeholder) {
    display: none;
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}

.tip {
    display: inline-block;
    margin: 0px 12px;
}

.vxe-table {
    max-height: 100%;
    overflow: hidden;
}

.vxe-table :deep(.vxe-table--render-wrapper) {
    height: 100%;

    .vxe-table--main-wrapper {
        height: 100%;
        display: flex;
        flex-flow: column;
    }

    .vxe-table--header-wrapper {
        flex-shrink: 0;
    }
}
</style>